<!--
 * @Author: huangyongchao
 * @Date: 2023-02-17 11:47:27
 * @Description: 请输入文件内容描述
-->

<template>
  <!-- <div style="height:150px; margin-top:100px">
    <d-slider v-model="options.volume"></d-slider>
  </div>-->
  <div style="text-align: center">
    <button @click="options.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'">{{ options.src }}</button>
    <videoPlay ref="video" style="display: inline-block; width: 100%" v-bind="options" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue'
import { videoPlay } from '../lib/index.js'

const options = reactive({
  width: '800px',
  height: '450px',
  color: '#409eff',
  muted: false, //静音
  webFullScreen: false,
  autoPlay: false, //自动播放
  currentTime: 0,
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  title: '', //视频名称
  type: 'm3u8',
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', //视频源
  controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'],
})
const video = ref(null)

nextTick(() => {
  console.log(video.value)
})
</script>

<style scoped>
</style>
